<template>
  <div class="order">
    <van-nav-bar title="我的订单" left-arrow @click-left="$router.go(-1)" />
    <van-tabs v-model="type" @change="changeTab">
      <van-tab title="全部" name="all"></van-tab>
      <van-tab title="待支付" name="payment"></van-tab>
      <van-tab title="待发货" name="delivery"></van-tab>
      <van-tab title="待收货" name="received"></van-tab>
      <van-tab title="待评价" name="comment"></van-tab>
    </van-tabs>

    <OrderListItem
      :item="item"
      v-for="item of orderList"
      :key="item.order_id"
    ></OrderListItem>
  </div>
</template>

<script>
import OrderListItem from "@/components/OrderListItem.vue";
import { getOrderList } from "@/api/pay";
export default {
  name: "OrderPage",
  components: {
    OrderListItem,
  },
  data() {
    return {
      active: 0,
      type: this.$route.query.dataType || "all",
      orderList: [],
    };
  },
  created() {
    this.getOrderList();
  },
  methods: {
    async getOrderList() {
      const {
        data: { list },
      } = await getOrderList({
        dataType: this.type,
        page: 1,
      });

      list.data.forEach((item) => {
        item.total_num = 0;
        item.goods.forEach((goods) => {
          item.total_num += goods.total_num;
        });
      });
      this.orderList = list.data;
      console.log(list.data);
    },

    changeTab(name) {
      console.log(name);
      this.getOrderList();
    },
  },
};
</script>

<style lang="less" scoped>
.order {
  background-color: #fafafa;
}
.van-tabs {
  position: sticky;
  top: 0;
}
</style>